<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆信息</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/common.css">
    <style>
        html,body{
            height: 100%;
        }
        body{
            background-color: #e5f1ff;
        }
    </style>
</head>
<body>
<div id="headerBox">
    <div class="logoBox"><img src="../img/logo.png" alt=""></div>
    <ul id="headerMenu">
        <li>
            <a>
                <div id="circle"></div>
                <span id="name"></span>
            </a>
        </li>
        <li>
            <a href="../index.html">
                <img src="../img/out.png" alt="">
                <span>退出</span>
            </a>
        </li>
    </ul>
</div>
<div id="leftMenu">
    <ul id="menuUl">
        <li>
            <a href="" class="aHover">
                <div><img src="../img/car.png" alt=""></div>
                <div><span>车辆信息</span></div>
            </a>
        </li>
    </ul>
</div>
<div id="content">
    <form class="layui-form"  lay-filter="loginForm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">项目名称：</label>
                <div class="layui-input-inline">
                    <select name="entryName" id="entryName">
                        <option value="">全部</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">起止时段：</label>
                <div class="layui-input-inline">
                    <input type="text" name="time" class="layui-input" id="test1" readonly>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">车牌号码：</label>
                <div class="layui-input-inline">
                    <input type="tel" name="licensePlate" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-normal" type="button" id="search">搜索</button>
            </div>
        </div>
    </form>
    <div class="tableBox" id="tableBox">
        <table class="layui-hide" id="test"></table>
    </div>
</div>
<div id="footer">
    ©2020四川恒泰佳祥实业有限公司&nbsp;&nbsp;&nbsp;备案号：蜀ICP备19019975号-1
</div>

<script src="../layui/layui.js"></script>
<script src="../js/common.js"></script>
<script>
    var _search = window.location.search;

    // var name = decodeURIComponent(_search.slice(6,_search.indexOf("&company_id=")));
    // var company_id = _search.slice(_search.indexOf('&company_id=')+12);

    var name = decodeURIComponent(_search.slice(6,_search.indexOf("&token=")));
    var token = _search.slice(_search.indexOf('&token=')+7);


    layui.use(['form','laydate','table','jquery'],function () {
        var form = layui.form,
            laydate = layui.laydate,
            table = layui.table,
            $ = layui.jquery;

        $("#name").html(name);

        $.ajax({
            // url: api + "/camera?companyId=" + company_id,
            headers: {"token":token,"Content-Type":"application/json"},
            url: api + "/camera?companyId=0",
            type: 'get',
            dataType: 'json',
            success: function (res) {
                if(res.code === 200){
                    var html = '';
                    $.each(res.data.data,function (index,item) {
                        html += '<option value="' + item.entryName + '">' + item.entryName + '</option>'
                    });
                    $("#entryName").append(html);
                    form.render('select');
                }
            }
        });

        laydate.render({
            elem: '#test1',
            type: 'datetime',
            range: true
        });

        table.render({
            elem: '#test',
            headers: {"token":token,"Content-Type":"application/json"},
            url: api + '/sediment?companyId=0',
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.data.total, //解析数据长度
                    "data": res.data.data.records //解析数据列表
                };
            },
            response:{
                statusCode: 200
            },
            request: {
                pageName: 'current',
                limitName: 'size'
            },
            cols: [[
                {field:'id',title: 'ID', hide:true},
                {field:'licensePlate', title: '车牌号',align:"center"},
                {field:'updateTime', title: '时间',align:"center"},
                {
                    field:'mouth',
                    title: '状态',
                    align:"center",
                    templet: function (records) {
                        return records.mouth==0?"进":"出"
                    }
                },
                {
                    field:'frontPhoto',
                    title: '车头照片(点击图片查看大图)',
                    align:"center",
                    templet: function (records) {
                        return "<img src='"+ records.frontPhoto +"' class='picShow'/>"
                    }
                },
                {
                    field:'bodyPhoto',
                    title: '车身照片(点击图片查看大图)',
                    align:"center",
                    templet: function (records) {
                        return "<img src='"+ records.bodyPhoto +"' class='picShow'/>"
                    }
                }
            ]],
            page:true
        });
        
        $("#search").on("click",function () {
            var formData = form.val("loginForm");
            if(formData.time){
                var time = formData.time.split(" - ");
                formData.startTime = time[0];
                formData.endTime = time[1];
                delete formData.time;
            }
            else{
                formData.startTime = "";
                formData.endTime = "";
            }
            console.log(formData);
            table.reload("test",{
                where:{
                    entryName: formData.entryName,
                    startTime: formData.startTime,
                    endTime: formData.endTime,
                    licensePlate: formData.licensePlate
                }
            })
        });

        $("#tableBox").on("click",".picShow",function () {
            var src = $(this).prop("src");
            layer.open({
                type: 1,
                title: false,
                area: '800px;',
                shade: 0.8,
                id: 'LAY_layuipro',
                resize: false,
                moveType: 1,
                content: '<img src="' + src + '" style="width: 800px;max-height: 800px">'
            });
        })
    });
</script>
</body>
</html>